import React from 'react'

class Test extends React.Component {
  timer = null
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('定时器开启')
    },1000)
  }
  componentWillUnmount() {
    console.log('componentWillUnmont')
    clearInterval(this.timer)
  }
  render(){
      return <div>test</div>
  }
}
class App extends React.Component {
  state = {
    count: 0,
    flag: true,
  }
  clickHandler = () => {
    this.setState({
      count: this.state.count + 1,
      flag: !this.state.flag,
    })
  }
  constructor() {
    super()
    console.log(
      'constructor,创建组件时最先执行，初始化时只执行一次，初始化state和创建Ref',
    )
  }
  componentDidMount() {
    console.log('componentDidMount，组件挂载渲染都会触发，网络请求和Dom操作')
  }

  componentDidUpdate() {
    console.log('componentDidUpdate,组件更新后,不能调用setSteta')
  }
  render() {
    console.log('render，每次组件渲染都执行，渲染UI,不能调用setSteta()')
    return (
      <div>
        this is div
        {this.state.flag ? <Test /> : ''}
        <button onClick={this.clickHandler}>{this.state.count}</button>
      </div>
    )
  }
}

export default App

/*constructor
render
componentDidMount

componentDidUpdate 

*/
